<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" />
    </keep-alive>
    <div class="main">
      <el-row>
        <div v-loading="listLoading" class="el-col-24 el-col-md-20 list">
          <el-tree
            :data="list"
            :props="props"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </div>
      </el-row>
    </div>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'
import { getCategories } from '../api/blog'
import tree from '@/utils/tree'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      subtitle: 'Categories',
      coverName: '/cover/cover3.jpg',
      headerHeight: 70,
      list: [],
      props: {
        label: (data) => {
          return data.title + ' (' + data.sum + ')'
        }
      },
      listLoading: true
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.listLoading = true
      getCategories().then(response => {
        this.list = tree.listToTreeMulti(response.data, 0, 'id', 'pid', 'children', { 'delete': false })
        this.list = tree.getTreeCounts(this.list)
        this.listLoading = false
      })
    },
    handleNodeClick(data) {
      this.$router.push('/category/' + data.id)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 100%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -3rem;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;

            .list {
                float: none;
                margin: auto;

                /deep/ .el-tree-node__expand-icon {
                    font-size: 25px;
                    padding: 10px;
                }
            }
        }
    }
</style>
